<template>
  <main>
    <Form>
      <FormItem>
        <Input type="text" v-model="tag.name" placeholder="标签名">
          <Icon type="md-pricetag" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem>
        <Input type="text" v-model="tag.color" placeholder="请在下面颜色选择器选取颜色"/>
        <ColorPicker v-model="tag.color" recommend />
        <span class="tag-show">
          <a :style="{'color':tag.color}">{{tag.name}}</a>
        </span>
      </FormItem>
      <FormItem>
          <Button type="success" @click="publish(isUpdate ? 'update' : 'publish')">
            {{ isUpdate ? '更新' : '保存' }}
          </Button>
          <Button type="default" onclick="window.history.go(-1)">返回</Button>
      </FormItem>
    </Form>
  </main>
</template>

<script>
import {
  findTagById,
  saveTag,
  updateTag
} from 'service'
import { loading } from 'mixins/loading'

export default {
  name: 'TagPublish',
  mixins: [loading],
  data() {
    return {
      isUpdate: false,
      tag: {
        id: 0,
        name: 'null',
        color: '#FF6690'
      },
      tagId: this.$route.params.id || 0,
    }
  },
  created() {
    if (this.tagId) {
      this.isUpdate = true
      this.getTag()
    }
  },
  methods: {
    async getTag() {
      let res = await findTagById(this.tagId) 
      this.tag.id = res.data.data.id
      this.tag.name = res.data.data.name
      this.tag.color = res.data.data.color
    },
    async publish(opt) {
      let validate = this.validate()
      if (validate) {
        this.openLoading('Saving~~')
        switch(opt) {
          case 'update': {
            let res = await updateTag(this.tag)
            if (res.data.flag) {
              this.$Message.success('标签更新成功~~')
              this.$router.push("/profile/tag/manage")
            } else {
              this.$Message.error('出错了owo，更新失败...')
            }
            this.$Spin.hide()
            break
          }
          case 'publish': {
            let res = await saveTag(this.tag)
            if (res.data.flag) {
              this.$Message.success('标签保存成功~~')
              this.$router.push("/profile/tag/manage")
            } else {
              this.$Message.error('出错了owo，保存失败...')
            }
            this.$Spin.hide()
            break
          }
        }       
      }

    },
    validate() {
      if (this.tag.name.trim() === '') {
        this.$Message.warning('要输入标签名称哦~~')
        return false
      } else if (this.tag.color.trim() == '') {
        this.$Message.warning('给标签加上颜色吧~~')
        return false
      }
      return true
    }
  },
}
</script>

<style lang="scss">
main {
  max-width: 800px;
  .ivu-form {
    padding: 1rem;
    button.ivu-btn {
      float: right;
      margin: 0 0.2rem;
    }
    .ivu-form-item:nth-child(3n-1){
      position: relative;
    }
    span.tag-show{
      position: absolute;
      top: 38px;
      right: 0;
      a {
        display: inline-block;
        font-size: 18px;
        line-height: 30px;
        padding: 0 15px;
        position: relative;
        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          color: inherit;
          background: currentColor;
          border-radius: 20px;
          opacity: .15;
        }
      } 
    }
  }
}
</style>